<template>
  <div>
    <div v-if="logs && logs.length" class="operating-record">
      <el-timeline class="not-icon-timeline timeline-style">
        <el-timeline-item
          v-for="(item) in logsData"
          :key="item.operationTime"
          :timestamp="item.operationTime | format('YYYY/MM/DD')"
          color="#fff"
          placement="top">
          <div v-for="(data, index) in item.operations" :key="data.time + index + ''">
            <div :style="index === item.operations.length - 1?'padding-bottom:0px;':''" class="detail">
              <div :span="18" style="display: flex; flex: 1; align-items: center;width: 70%">
                <div v-if="(isAdmin || data.opeatorUserId === userInfo.id) && isShowEdit" class="edit-btn" style="flex-shrink: 0;" @click="editRemark(data)"><img :src="editIcon" alt=""></div>
                <el-tooltip v-if="data.content" effect="dark" placement="top" popper-class="content-tooltip">
                  <div slot="content">
                    {{ data.content }}
                  </div>
                  <span class="ellipsis" style="margin-right: 10px;max-width: 60%">
                    {{ data.opeatorUser?`${data.opeatorUser}，`:'' }}{{ data.content }}
                  </span>
                </el-tooltip>
                <span class="ellipsis" style="max-width: 80%">
                  <span v-if="data.remarks" class="text-black">备注：</span>
                  <el-tooltip v-if="data.remarks" effect="dark" placement="top" popper-class="content-tooltip">
                    <div slot="content">
                      {{ data.remarks }}
                    </div>
                    <span class="ellipsis" style="max-width: 80%">
                      {{ data.remarks }}
                    </span>
                  </el-tooltip>
                </span>
              </div>
              <div class="time">{{ data.time | format(showMobilePage?'YYYY/MM/DD':'YYYY/MM/DD HH:mm:ss') }}</div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
      <div v-if="isFold && logsNum > 3" class="expand-text" @click="switchExpand">
        <div class="item">{{ isExpand?'收起':'展开' }}全部记录 <i :class="isExpand?'el-icon-arrow-up':'el-icon-arrow-down'"/></div>
      </div>
      <edit-log-dialog ref="editLogDialog" :edit-api="editApi" :order-type="orderType" @success="editSuccess" />
    </div>
    <div v-else class="empty-container">
      <img :src="emptyImg" alt="">
      <div class="empty-text">暂无操作日志</div>
    </div>
  </div>

</template>
<script>
import { standardFormatNoHour, standardFormat, format } from '@/filters/date';
import emptyImg from '@/assets/empty-data-icon.png';
import { mapState } from 'vuex';
import editIcon from '@/assets/edit.png';
import Title from '@/components/Title';
import EditLogDialog from '@/components/EditLogDialog';
export default {
  name: 'LogTimeLine',
  filters: {
    standardFormatNoHour,
    standardFormat, format
  },
  components: {
    Title,
    EditLogDialog
  },
  props: {
    logs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    isFold: {
      type: Boolean,
      default: false
    },
    editApi: {
      type: Function,
      default: () => ({})
    },
    orderType: {
      type: Number,
      default: null
    },
    isShowEdit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      editIcon, emptyImg,
      isExpand: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    isAdmin() {
      if (this.userInfo.userName === '管理员') return true;
      return false;
    },
    logsData() {
      if (this.isFold && !this.isExpand && this.logs && this.logsNum > 3) {
        return this.miniLogs;
      }
      return this.logs;
    },
    logsNum() {
      const totalLogs = this.logs;
      let logsNum = 0;
      totalLogs.forEach(i => {
        logsNum += i.operations.length;
      });
      return logsNum;
    },
    miniLogs() {
      const totalLogs = this.logs;
      // 获取折叠后的数据
      const miniLogItem = [];
      for (let i = 0; i < totalLogs.length; i++) {
        if (miniLogItem.length >= 3) break;
        for (let j = 0; j < totalLogs[i].operations.length; j++) {
          totalLogs[i].operations[j].operationTime = totalLogs[i].operationTime;
          miniLogItem.push(totalLogs[i].operations[j]);
          if (miniLogItem.length >= 3) break;
        }
      }
      const miniLogs = [];
      miniLogItem.forEach(i => {
        const a = miniLogs.find(j => j.operationTime === i.operationTime);
        if (a) {
          a.operations.push(i);
        } else {
          miniLogs.push({
            operationTime: i.operationTime,
            operations: [i]
          });
        }
      });
      return miniLogs;
    }
  },
  methods: {
    switchExpand() {
      this.isExpand = !this.isExpand;
    },
    editRemark(item) {
      this.$refs['editLogDialog'].dialogVisible = true;
      this.$refs['editLogDialog'].initData(item);
    },
    editSuccess() {
      this.$emit('success');
    },
    handelEdit(data) {
    }
  }
};
</script>
<style lang="scss" scoped>
.timeline-style {
  padding-left: 88px;
  &::v-deep {
    .el-timeline-item__wrapper {
      .el-timeline-item__timestamp.is-top {
        position: absolute;
        left: -88px;
        color: #666666;
        font-size: 14px;
        top: -3px;
      }
    }
    .el-timeline-item {
      padding-bottom: 12px;
      padding-top: 12px;
      .el-timeline-item__tail {
        border-left: 1px solid #DDDDDD;
      }
      &::after {
        content: '';
        background-color: #EDEEF2;
        width: calc(100% - 24px);
        position: absolute;
        bottom: 0;
        left: 24px;
        height: 1px;
      }
      &:last-child {
        padding-bottom: 0px;
        &::after {
          display: none;
        }
      }
    }
    .el-timeline-item__node {
      left: 0px;
      border: 2px solid #FD8546;
      width: 9px;
      height: 9px;
    }
  }
}
.expand-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  .item {
    font-size: 14px;
    color: #141C3D;
    cursor: pointer;
    display: flex;
    align-items: center;
    i {
      color: #406eff;
      margin-left: 5px;
    }
  }
}
.operating-record {
  .el-timeline-item__wrapper {
    .detail {
      display: flex;
      align-items: center;
      // line-height: 26px;
      padding-bottom: 16px;
      line-height: 1.2;
      border-radius: 8px;
      // border: 1px solid #eee;
      color: #333;
      font-size: 14px;
      .time {
        text-align: right;
        color: #999;
      }
    }
  }
  .text-black {
    font-weight: 600;
    color: #333;
  }
  .edit-btn {
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin-right: 10px;
    img {
      height: 100%;
      width: 100%;
    }
  }
}
.empty-container {
  text-align: center;
  position: relative;
  margin-top: 20px;
  img {
    width: 90px;
  }
  .empty-text {
    color: #999;
    max-width: 300px;
    font-size: 14px;
    margin: 0 auto;
  }
}
</style>
<style lang="scss">
  .content-tooltip {
    max-width: 350px;
  }
</style>
